<template>
    <div class="card card-bordered shadow-xl mb-8">
      <div class="card-body"
           :class="customBodyClass"
           :style="{maxHeight: showScroll ? '500px' : 'none',overflowY: showScroll ? 'auto' : 'visible',}">
        <div class="flex justify-center items-center custom-card-title">
          <Icon v-if="iconName" :name="iconName" :color="iconColor" class="mr-2" :size="iconSize"/>
          <h2 v-if="title" class="card-title" :class="customTitleStyle">
            {{ title }}
          </h2>
        </div>
        <slot/>
      </div>
    </div>
</template>

<script setup lang="ts">
// 定义 props

defineProps({
  iconName: {
    type: String,
    default: "",
  },
  iconColor: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  customBodyClass: {
    type: String,
    default: "",
  },
  customTitleStyle: {
    type: String,
    default: "text-gray-400 text-sm",
  },
  showScroll: {
    type: Boolean,
    default: false,
  },
  iconSize: {
    type: String,
    default: "18",
  },
});
</script>

<style lang="less" scoped>
.custom-card-title {
  margin-top: -1rem;
}

</style>
